<!-- 部门权限 -->
<template>
<div class="depart-root-wp com-main">
  <div v-if="!currentDepart" class="empty">请先选择一个部门!</div>
  <template v-else>
    <span>所拥有的权限</span>
    <div class="tree-box">
      <el-tree ref="tree"
        :data="tree"
        show-checkbox
        default-expand-all
        :node-key="defaultProps.key"
        :props="defaultProps">
      </el-tree>
    </div>
    <div class="footer clearfix">
      <el-dropdown placement="top" size="medium">
        <el-button size="small">
          树操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item><div class="drop-tree-item" @click="setCheckedMenu(true)">全部勾选</div></el-dropdown-item>
          <el-dropdown-item><div class="drop-tree-item" @click="setCheckedMenu(false)">取消全选</div></el-dropdown-item>
          <el-dropdown-item><div class="drop-tree-item" @click="toggleExpandedAll(true)">展开所有</div></el-dropdown-item>
          <el-dropdown-item><div class="drop-tree-item" @click="toggleExpandedAll(false)">合并所有</div></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button class="pull-right" type="primary" icon="el-icon-edit-outline" size="small"
        :loading="btnLoading"
        @click="submit()">保存</el-button>
    </div>
  </template>
</div>
</template>
<script>

import {permission, role} from "@/config/api.js";

export default {
  name: 'depart-root',
  data () {
    return {
      btnLoading: false,

      // 配置项
      defaultProps: {
        children: 'children',
        label: 'slotTitle',
        key: 'value'
      },

      // 本来选中
      checkedOrigin: [],
      // 树数据
      tree: [],
    }
  },
  props: {
    // 当前选中的部门
    currentDepart: {
      default () {
        return null;
      }
    }
  },
  watch: {
    currentDepart () {
      this.getCheckedById();
    }
  },
  mounted () {
    this.getMenuList(); // 获取当前的菜单列表
  },
  methods: {
    // 获取当前的菜单列表
    getMenuList () {
      this.$get(role.queryTreeList).then(res => {
        if (res.success) {
          this.allKeys = res.result.ids;
          this.tree = res.result.treeList;
        }
      })
    },

    // 获取选中的菜单项
    getCheckedById () {
      var param = {
        departId: this.currentDepart.id
      }
      this.loadInterface = 1;
      this.$get(permission.queryDepartPermission, param).then(res => {
        if (res.success) {
          var data = res.result;
          this.checkedOrigin = data; // 记录本来选中
          this.setCheckedMenu(data);
        }
      })
    },

    // 保存权限
    submit () {
      var checkedKeys = this.$refs.tree.getCheckedKeys();
      var param = {
        permissionIds: checkedKeys.join(','), // 当前选中的id
        lastpermissionIds: this.checkedOrigin.join(','), // 没改变之前的id
        departId: this.currentDepart.id
      }
      this.$post(permission.saveRolePermission, param).then(res => {
        if (res.success) {
          this.$message.success(res.message);
          this.checkedOrigin = this.$g.copy(checkedKeys);
        }
      })
    },

    // 设置选中项，true全选、false全不选、数组-选中数组项
    setCheckedMenu (data) {
      var arr = data;
      if (typeof data == 'boolean') {
        arr = data ? this.$g.copy(this.allKeys) : []
      }
      this.$refs.tree.setCheckedKeys(arr);
    },

    // 切换展开
    toggleExpandedAll (isExpand) {
      var _this = this, key = this.defaultProps.key, children = this.defaultProps.children;
      // 遍历树
      ergodic(this.tree);
      // 遍历
      function ergodic (arr) {
        arr.forEach(item => {
          _this.$refs.tree.store.nodesMap[item[key]].expanded = isExpand;
          if (item[children] && item[children].length) {
            ergodic(item[children]);
          }
        })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.depart-root-wp {
  padding: 25px;
  .empty {
    font-size: 16px;
  }  
  
  .tree-box {
    margin: 4px 0;
    max-height: 500px;
    overflow: auto;
  }

  .footer {
    margin: 0 -25px -20px;
    padding: 10px 25px;
    border-top: 1px solid #E8E8E8;
  }
}
</style>